<template>
  <div class="index">
    <Header></Header>
    <Earth ref="earth"></Earth>
    <!-- 内容 -->
    <div class="conent">
      <div class="conent-flex">
        <!-- 左边 -->
        <div class="conent-flex-l">
          <!--  -->
          <div class="flex-t">
            <!--  -->
            <div class="flex-t-t">
              <div
                :class="['flex-t-t-l', Inv == 1 ? 'inv-h-se' : '']"
                @click="changetap(1)"
              >
                <span>数据资源</span>
              </div>
              <div
                :class="['flex-t-t-l', Inv == 3 ? 'inv-h-se' : '']"
                @click="changetap(3)"
              >
                <span>功能资源</span>
              </div>
            </div>
            <!--  -->
            <!-- <div class="flex-t-t1" v-show="Inv == 2">
              <input type="text" name="" id="" placeholder="请输入内容" />
              <img src="../assets/sousuo.png" alt="" />
            </div> -->
          </div>
          <!-- 数据资源切换 -->
          <div
            class="flex-top"
            v-show="Inv == 1"
            v-for="item in lists1"
            :key="item.label + '1'"
          >
            <div class="flex-top-t" @click="showCont(item)">
              <div class="flex-top-t-l">
                <span>{{ item.label }}</span>
              </div>
              <div>
                <img src="../assets/maps/retu.png" alt="" />
              </div>
            </div>
            <!-- 二級 -->
            <div v-if="item.shows" class="con">
              <div v-for="(items1, index) of item.children" :key="index">
                <div class="flex-top-t1">
                  <div
                    class="flex-top-t-l"
                    @click="changecolorE(items1.id, items1, index)"
                  >
                    <span>{{ items1.label }}</span>
                  </div>
                  <div>
                    <!-- <img src="../assets/maps/jian_icon.png" alt="" style="width:2rem"/> -->
                  </div>
                </div>
                <!-- 三级v-if="item.showThree" -->
                <!-- :class="isSelectedSomeThings(item.title) ? 'actives' : ''" -->
                <div>
                  <div
                    class="detail3"
                    @click="
                      changecolor(item.title, items1.label, item.name, item.id)
                    "
                    v-for="(item, index) in items1.children"
                    :key="index"
                    v-show="showT"
                    :class="[item.id == clickid ? 'actives' : '']"
                  >
                    <div class="detail3-text">{{ item.title }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div v-show="Inv == 1" class="flex-top">
            <el-tree
              :data="lists1"
              :default-expand-all="true"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </div> -->
          <!-- 功能资源 -->
          <div
            class="flex-top"
            v-show="Inv == 3"
            v-for="item in list"
            :key="item.title + '1'"
          >
            <div class="flex-top-t" @click="showContT(item)">
              <div class="flex-top-t-l">
                <span>{{ item.title }}</span>
              </div>
              <div>
                <img src="../assets/maps/retu.png" alt="" />
              </div>
            </div>
            <!-- 点击事件 -->
            <!-- :class="[items.title == clickidji ? 'actives1' : '']" -->
            <!-- {{(item.show ?? true).toString()}} -->
            <div v-if="item.show">
              <div
                class="flex-top-t1"
                @click="changecolorji(items.title, item.title)"
                v-show="showT"
                v-for="items in item.data"
                :key="items.title + '3'"
                :class="isSelectedSomeThing(items.title) ? 'actives1' : ''"
              >
                <div class="flex-top-t-l">
                  <img :src="items.photo" alt="" />
                  <span>{{ items.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <!-- <div class="conent-flex-r">
          <div class="conent-flex-r-t">
            <img src="../assets/maps/juli.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/height.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/weight.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/dixia.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/shuxing.png" alt="" />
          </div>
        </div> -->
      </div>
      <!-- <div class="images">
        <img src="../assets/my/mys.png" alt="" />
      </div> -->
    </div>
    <!-- 属性弹框  -->
    <div class="xbsj-model-box" @click="showclick" v-show="showT2">
      <!-- 内容 -->
      <div class="model-content">
        <div class="content-box" v-for="(item, index) in attrData" :key="index">
          <div class="content-box-c" :style="{ width: width }">
            <span class="content-box-l">{{ item.key }}</span>
          </div>

          <span class="content-box-r">{{ item.value }}</span>
        </div>
        <!-- <div class="content-box">
          <span class="content-box-l">标题</span
          ><span class="content-box-r">内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容容内容内容内容内容</span>
        </div> -->
      </div>
      <!-- 底部按钮 -->
      <div class="xbsj-model-footers">
        <button class="btn confirmBtn" @click="ok">关闭</button>
      </div>
    </div>
  </div>
</template>
<script>
import { maps, resourcesE } from "../api/api.js";
import Header from "@/components/header.vue";
import Earth from "./Earth/index";
let imgurl = "http://117.73.254.217:2221/resources";

export default {
  name: "maps",
  components: {
    Header,
    Earth,
  },
  data() {
    return {
      show: true,
      shows: true,
      showT: true,
      // showT1: true,
      // 属性弹框
      showT2: true,
      //
      showThree: false,
      //
      clickid: "",
      //
      Inv: 1,
      list: [],
      lists1: [],
      selectedList: [],
      selectedListS: [],
      dataSourceMap: [],
      // 地质数据
      listArr: [],
      type: "",
      name: "",
      // 隐藏显示
      attrData: [
         { key: "file", value: 1111 },
         { key: "names", value: 1111 },
        { key: "footerd", value: 1111 },
        // { key: "names", value: 1111 },
        // { key: "footerd", value: 1111 },
        // { key: "names", value: 1111 },
        // { key: "footerd", value: 1111 },
        // { key: "names", value: 1111 },
        // { key: "footerd", value: 1111 },
        //  { key: "names", value: 1111 },
        // { key: "footerd", value: 1111 },
        // { key: "names", value: 1111 },
        // { key: "footerd", value: 1111 },
      ],
      //
      defaultProps: {
        children: "children",
        label: "label",
      },
      opc: 1.0,
      // 二级
      childrens: [],
      width: ""
    };
  },
  created() {
    this.type = this.$route.params.type;
    this.name = this.$route.params.name;
    console.log(this.type);
    console.log(this.name);
    this.lists();
    this.listL();
  },
  mounted() {},
  methods: {
    //
    listL() {
      var arr = [];
      for (var i = 0; i < this.attrData.length; i++) {
        arr.push(Number(this.attrData[i].key.length));
      }
      this.width = Math.max.apply(null, arr) - 1.9 + "rem";
    },
    // 点击切换
    changetap(value) {
      this.clickid = "";
      this.Inv = value;
      let formData = new FormData();
      this.tokes = sessionStorage.getItem("token");
      formData.append("token", this.tokes);
      formData.append("type", this.Inv);
      maps(formData).then((res) => {
        if (this.Inv == 1) {
          console.log(res);
          this.lists1 = res;
          this.lists1.forEach((e) => (e.shows = true));
        } else if (this.Inv == 3) {
          this.list = res;
          for (var i = 0; i < this.list.length; i++) {
            for (var j = 0; j < this.list[i].data.length; j++) {
              this.list[i].data[j].photo = imgurl + this.list[i].data[j].photo;
            }
          }
          this.list.forEach((e) => (e.show = true));
          // 默认选中第一个
          // this.selectedList = this.list
          //   .map((i) => (i.data.length === 0 ? null : i.data[0].title))
          //   .filter((i) => i !== null);

          // console.log("this.selectedList: ", this.selectedList);
        }
      });
    },
    // 点击第一勘察院
    isSelectedSomeThings(menu) {
      return this.selectedListS.indexOf(menu) != -1;
    },
    // 获取一组
    getGroupByTitles(title) {
      return this.lists1.find((i) => i.title === title);
    },
    // 点击三级
    changecolor(e, i, a, id) {
      console.log(a);
      this.clickid = id;
      let groupValues1 = this.getGroupByTitles(i);
      let exitsSecondMenus1 = [];
      if (groupValues1) {
        exitsSecondMenus1 = groupValues1.data.map((i) => i.title);
        // 过滤掉当前组内的所有二级
        this.selectedListS = this.selectedListS.filter(
          (i) => exitsSecondMenus1.indexOf(i) === -1
        );
      }
      // this.selectedListS.push(e);
      //
      let astr = a.toString();
      console.log(astr.substr(astr.length - 4, 4));
      if (astr.substr(astr.length - 7, 7) === "geojson") {
        this.controlGeojson(a);
      } else {
        this.controlTile(a);
      }
    },
    controlGeojson(url) {
      let param1 = arguments[1];
      let name = url.split("/")[url.split("/").length - 1];
      if (param1) {
        if (this.$root._earth._viewer.entities.values.length > 1) {
          this.unloadGeojson(url, param1);
        } else {
          this.loadGeojson(url, param1);
        }
      } else {
        if (
          this.containsName(
            this.$root._earth._viewer.dataSources._dataSources,
            name
          )
        ) {
          this.unloadGeojson(url, param1);
        } else {
          this.loadGeojson(url, param1);
        }
      }
    },
    containsName(objs, name) {
      let result = false;
      for (let ds in objs) {
        if (objs[ds]._name === name) {
          result = true;
          break;
        }
      }
      return result;
    },
    loadGeojson(url) {
      let obj = new Object();
      obj.url = url;
      let self = this;
      // eslint-disable-next-line no-undef
      obj.data = Cesium.GeoJsonDataSource.load(url, {
        // eslint-disable-next-line no-undef
        stroke: Cesium.Color.fromRandom({ alpha: 1.0 }),
        strokeWidth: 3,
      });
      this.dataSourceMap.push(obj);
      obj.data.then(function (dataSource) {
        self.$root._earth._viewer.dataSources.add(dataSource);
      });
      this.$root._earth._viewer.flyTo(obj.data);
    },
    unloadGeojson(url) {
      let param1 = arguments[1];
      let self = this;
      if (param1) {
        self.$root._earth._viewer.entities.removeAll();
      }
      this.dataSourceMap
        .filter((ele) => {
          return ele.url === url;
        })[0]
        .data.then((dataSource) => {
          self.$root._earth._viewer.dataSources.remove(dataSource);
        });
      this.dataSourceMap = this.dataSourceMap.filter((ele) => {
        return ele.url !== url;
      });
    },
    controlTerrain(url) {
      if (
        this.containsKey(this.$root._earth.sceneTree.$refs, url) &&
        this.$root._earth.sceneTree.$refs[url].czmObject.url != ""
      ) {
        this.unloadTerrain(url);
      } else {
        this.loadTerrain(url);
      }
    },
    loadTerrain(url) {
      let terrain = {
        ref: url,
        czmObject: {
          xbsjType: "Terrain",
          name: url,
          xbsjTerrainProvider: {
            type: "XbsjCesiumTerrainProvider",
            XbsjCesiumTerrainProvider: {
              url: url,
              requestVertexNormals: true,
              requestWaterMask: true,
            },
          },
        },
      };
      if (this.$root._earth.sceneTree.$refs[url]) {
        this.$root._earth.sceneTree.$refs[url].czmObject = terrain.czmObject;
      } else {
        this.$root._earth.sceneTree.root.children.push(terrain);
      }
    },
    unloadTerrain(url) {
      this.$root._earth.sceneTree.$refs[url].czmObject = {};
    },
    controlTile(url) {
      let tileJson = arguments[1];
      if (
        this.containsKey(this.$root._earth.sceneTree.$refs, url) &&
        this.$root._earth.sceneTree.$refs[url].czmObject.url != ""
      ) {
        this.unloadTile(url);
      } else {
        this.loadTile(url, tileJson);
      }
    },
    containsKey(obj, key) {
      let result = false;
      for (let k in obj) {
        if (k === key) {
          result = true;
          break;
        }
      }
      return result;
    },
    sceneTreeRemoveItem(fucText) {
      this.$root._earth.sceneTree.root.children.forEach((element) => {
        if (element.czmObject.name === fucText) {
          element.czmObject = {};
        }
      });
    },
    loadTile(url) {
      console.log(url);
      let tileJson = arguments[1];
      let tile;
      if (tileJson) {
        tile = tileJson;
      } else {
        tile = {
          ref: url,
          czmObject: {
            xbsjType: "Tileset",
            name: url,
            url: url,
          },
        };
      }
      if (this.$root._earth.sceneTree.$refs[url]) {
        this.$root._earth.sceneTree.$refs[url].czmObject = tile.czmObject;
      } else {
        this.$root._earth.sceneTree.root.children.push(tile);
      }
      // this.$root_earth.sceneTree.$refs[url].czmObject.maximumScreenSpaceError = 1.0
      this.$root._earth.sceneTree.$refs[url].czmObject.flyTo();
    },
    unloadTile(url) {
      console.log("un" + url);
      this.$root._earth.sceneTree.$refs[url].czmObject = {};
    },
    // 功能资源
    isSelectedSomeThing(menu) {
      return this.selectedList.indexOf(menu) != -1;
    },
    // 获取一组
    getGroupByTitle(title) {
      return this.list.find((i) => i.title === title);
    },
    changecolorji(e, i) {
      console.log(e);
      console.log(i);
      let self = this; // eslint-disable-line no-unused-vars

      switch (e) {
        case "距离测量":
          this.$root._earth.analyzation.measurement.type = "SPACE_DISTANCE";
          break;
        case "高度测量":
          this.$root._earth.analyzation.measurement.type = "TRIANGLE_DISTANCE";
          break;
        case "多点测量":
          this.$root._earth.analyzation.measurement.type = "POINT";
          break;
        case "面积测量":
          this.$root._earth.analyzation.measurement.type = "SPACE_AREA";
          break;
        case "结束测量":
          this.$root._earth.analyzation.measurement.type = "NONE";
          this.$root._earth &&
            this.$root._earth.analyzation.measurement.clearResults();
          break;
        case "地下模式":
          this.$root._earth.terrainEffect.subSurfaceEnabled = true;
          break;
        case "地面透明":
          if (this.opc < 0.0) {
            this.opc = 1.0;
          } else {
            this.opc -= 0.1;
          }
          console.log(this.opc);
          this.$root._earth.terrainEffect.surfaceOpacity = this.opc;
          break;
        case "地形服务":
          this.controlTerrain("http://117.73.254.217:2221/resources/sddem");
          break;
        case "属性查询":
          if (!this.attrEnable) {
            let viewer = this.$root._earth._viewer;
            this.$root._earth.interaction.picking.enabled = true;
            let self = this;
            // eslint-disable-next-line no-undef
            this.entityClickHandler = new Cesium.ScreenSpaceEventHandler(
              viewer.scene.canvas
            );
            this.entityClickHandler.setInputAction(function (click) {
              var pickedObject = viewer.scene.pick(click.position);
              if (pickedObject) {
                // if (pickedObject.id.label === undefined) {
                let properties = [];
                if (typeof pickedObject.id === "undefined") {
                  let propertyNames = pickedObject.getPropertyNames();
                  propertyNames.forEach((x) => {
                    console.log(x + pickedObject.getProperty(x));
                    properties.push({
                      key: x,
                      value: pickedObject.getProperty(x),
                    });
                  });
                  self.showT2 = true;
                  self.attrData = properties;
                } else {
                  let propertiesValue = pickedObject.id.properties;
                  propertiesValue.propertyNames.forEach((item) => {
                    properties.push({
                      key: item,
                      value: propertiesValue[item]._value,
                    });
                  });
                  console.log("properties", properties); // 写进属性窗口里
                  self.showT2 = true;
                  self.attrData = properties;
                  self.showAttrBoard = true;
                  pickedObject.selected = true;
                }
              }
              // }
              // eslint-disable-next-line no-undef
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          } else {
            this.entityClickHandler.destroy();
            this.entityClickHandler = undefined;
          }
          break;
        default:
          break;
      }
      // 弹框方法
      // this.open();
      // 显示弹框
      // this.showT2 = true;
      // this.showT2=!this.showT2
      // 更新选中内容
      // 清空同层选中的
      let groupValues = this.getGroupByTitle(i);
      let exitsSecondMenus = [];
      if (groupValues) {
        exitsSecondMenus = groupValues.data.map((i) => i.title);
        console.log(exitsSecondMenus);
        // 过滤掉当前组内的所有二级
        this.selectedList = this.selectedList.filter(
          (i) => exitsSecondMenus.indexOf(i) === -1
        );
      }
      // 数组
      this.selectedList.push(e);
      console.log(this.selectedList);
    },
    // 数据资源显示隐藏
    showCont(e) {
      this.shows = !this.shows;
      let index = this.lists1.indexOf(e);
      this.lists1[index].shows = e.shows === null ? true : !e.shows;
      console.log(this.lists1[index].shows);
      this.lists1 = [...this.lists1];
    },
    // 功能资源显示隐藏
    showContT(e) {
      let index = this.list.indexOf(e);
      this.list[index].show = e.show === null ? true : !e.show;
      this.list = [...this.list];
      // this.$nextTick(() =>{
      //   e.show = e.show === null ? true : !e.show;
      //   this.list = this.list;
      // });
    },
    // 智能地图
    lists() {
      let formData = new FormData();
      this.tokes = sessionStorage.getItem("token");
      formData.append("token", this.tokes);
      formData.append("type", "1");
      maps(formData).then((res) => {
        this.lists1 = res;
        // children
        this.lists1.forEach((e) => (e.shows = true));
        for (var i = 0; i < this.lists1.length; i++) {
          if (this.lists1[i].children) {
            this.lists1[i].children.forEach((e) => (e.showThree = false));
            this.childrens = this.lists1[i].children;
          }
        }
      });
    },
    // 打开
    // open() {
    //   this.showT2 = true;
    //   this.attrData = [{ key: 0, value: "内容" }];
    // },
    // 属性弹框
    ok() {
      this.showT2 = !this.showT2;
    },
    showclick() {
      this.$emit("showclick");
    },
    //
    // handleNodeClick(data) {
    //   if (data.id != undefined && data.url != undefined) {
    //     console.log(data.url);
    //     let a = data.url;
    //     let astr = a.toString();
    //     console.log(astr.substr(astr.length - 4, 4));
    //     if (astr.substr(astr.length - 7, 7) === "geojson") {
    //       this.controlGeojson(a);
    //     } else {
    //       this.controlTile(a);
    //     }
    //   }
    // },
    //  点击二级显示三级
    changecolorE(e, item, ind) {
      let id = e;
      let formData = new FormData();
      formData.append("token", this.tokes);
      formData.append("id", id);
      resourcesE(formData).then((res) => {
        this.listArr = res.arr;
        for (var i = 0; i < res.arr.length; i++) {
          if (res.arr[i].photo) {
            res.arr[i].photo = imgurl + res.arr[i].photo;
          }
        }
        let index = ind;
        this.childrens[index].showThree = !this.childrens[index].showThree;
        this.childrens = [...this.childrens];
        if (this.childrens[ind].showThree === true) {
          this.$set(item, "children", res.arr);
        } else {
          this.$delete(item, "children", res.arr);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  color: #0b61ff;
}
/deep/.el-tree-node__content {
  // width: 10rem;
  height: 2.2rem;
  // border-bottom: 1px solid #0b61ff;
  background: #fff !important;
  overflow: auto;
}
// 鼠标移入样式
/deep/.el-tree-node__content:hover {
  background: #fff !important;
}
/deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: #fff; //节点的背景颜色
  color: #0b61ff; //节点的字体颜色
}
/deep/.el-tree-node.is-expanded > .el-tree-node__children {
  display: block;
  overflow: auto;
  max-height: 10rem;
  min-height: 1rem;
}
/deep/.el-tree-node__children::-webkit-scrollbar {
  /*隐藏滚轮*/
  height: 0;
  width: 0;
}
.con {
  display: block;
  overflow: auto;
  max-height: 10rem;
  min-height: 1rem;
  .detail3 {
    width: 15.7rem;
    height: 2rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 0.1rem solid #e4e4e4;
    justify-content: space-around;
    .detail3-text {
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      cursor: pointer;
    }
  }
}
.actives {
  // border: 0.1rem solid #0b61ff !important;
  // color: #0b61ff;
  color: #0b61ff;
  font-weight: bold;
}
.actives1 {
  // border: 0.1rem solid #0b61ff !important;
  // color: #0b61ff;
  color: #0b61ff;
  font-weight: bold;
}
.conent {
  // width: 100%;
  width: 260px;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  .conent-flex {
    width: 98%;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    .conent-flex-l {
      width: 16rem;
      height: auto;
      .flex-t {
        // width: 90%;
        height: auto;
        background: #fff;
        margin-bottom: 1rem;
        .flex-t-t {
          border-bottom: 0.1rem solid #e4e4e4;
          display: flex;
          .inv-h-se {
            color: #0b61ff;
          }
          .flex-t-t-l {
            width: 50%;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
        .flex-t-t1 {
          width: 14rem;
          height: 1.5rem;
          border-radius: 4rem;
          margin: 0 auto;
          margin-top: 0.6rem;
          border: 0.1rem solid #e4e4e4;
          display: flex;
          justify-content: space-around;
          align-items: center;
          input {
            border: none;
            outline: none;
          }
          input:focus {
            outline: none;
          }
          img {
            width: 1rem;
            height: 1rem;
          }
        }
      }
      .flex-top {
        // width: 90%;
        height: auto;
        // margin-top: 1rem;
        .flex-top-t:hover {
          color: blue;
        }
        .flex-top-t {
          width: 98.8%;
          height: 2rem;
          background: #146ac1;
          font-size: 1rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          cursor: pointer;
          .flex-top-t-l {
            width: auto;
            color: #fff;
            // color: #000;
            // display: flex;
            //  .flex-top-t-i{
            //    width: 1rem;
            //    height: auto;
            //  }
          }
          .flex-top-t1 {
            width: 100%;
            height: 2rem;
            border-bottom: 0.1rem solid #e4e4e4;
          }
        }
        .flex-top-t1 {
          width: 15.7rem;
          height: 2rem;
          font-size: 1rem;
          display: flex;
          align-items: center;
          background: #fff;
          border-bottom: 0.1rem solid #e4e4e4;
          justify-content: space-evenly;

          .flex-top-t-l {
            width: auto;
            display: flex;
            align-items: center;
            justify-content: space-around;
            cursor: pointer;
            
            img {
              width: 1rem;
              margin-right: 1rem;
            }
          }
        }
        .flex-top-t2 {
          width: 100%;
          height: 2rem;
          background: #78afe8;
          font-size: 1rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          cursor: pointer;
          .flex-top-t-l {
            width: auto;
            color: #fff;
            // display: flex;
            //  .flex-top-t-i{
            //    width: 1rem;
            //    height: auto;
            //  }
          }
          .flex-top-t1 {
            width: 100%;
            height: 2rem;
            border-bottom: 0.1rem solid #e4e4e4;
          }
        }
      }
    }
    .conent-flex-r {
      width: auto;
      height: auto;
      display: flex;
      flex-direction: column;
      .conent-flex-r-t {
        width: 2rem;
        height: 2rem;
        border-radius: 3rem;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
        cursor: pointer;
        img {
          width: 1rem;
          height: 1rem;
        }
      }
    }
  }
  .images {
    width: 100%;
    height: auto;
    img {
      width: 100%;
      height: 49.1rem;
    }
  }
}
//
.xbsj-model-box {
  position: absolute;
  background: rgba(71, 71, 71, 0.8);
  top: 20rem;
  left: 20rem;
  border-radius: 3px;
  z-index: 10009;
  width: 26rem;
  // height: 10rem;
  height: 40%;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 14px;
  font-family: \5fae\8f6f\96c5\9ed1;
}
.model-content {
  /* overflow-x: auto;
  overflow-y: auto; */
  position: relative;
  height: 20rem;
  padding: 4px;
  // text-align: left;
  // transition: all 0.5s linear;
  // height: 100%;
  overflow: auto;
  // overflow: auto;
  .content-box {
    width: 100%;
    height: auto;
    display: flex;
    .content-box-c {
      // width: 4rem;
      max-width: auto;
      min-width: auto;
      border-right: 0.1rem solid;
      .content-box-l {
        width: auto;

        height: auto;
        margin-left: 0.6rem;
      }
    }

    .content-box-r {
      width: auto;
      margin-left: 1rem;
    }
  }
}
.xbsj-model-footers {
  margin: 0;
  padding: 6px 0;
  text-align: right;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  // background-color: var(--FormBGColor);
}
.btn {
  min-width: 60px;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  padding: 2px 15px;
  border-radius: 3px;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
}
.xbsj-model-footer .confirmBtn:focus {
  background-image: linear-gradient(0deg, #cad1d4, #cad1d4);
}
.xbsj-model-footer .confirmBtn:hover {
  background-image: linear-gradient(0deg, #9aaec2, white);
}
.xbsj-model-footer .confirm-btn .marginLeft {
  margin-left: 10px;
}
.confirmBtn {
  border: 1px solid #c2c2c2;
  background-image: linear-gradient(0deg, #c2c2c2, white);
  color: #000000;
  margin-right: 24px;
  outline: none;
}
</style>